<template>
    <a-card style="margin-bottom: 10px">
        <a-form layout="inline" :model="formState" @finish="handleFinish">
            <a-form-item label="数据名称：">
                <a-input v-model:value="formState.sjmc"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button
                    type="primary"
                    @click="handleFinish"
                    style="margin-right: 4px"
                >
                    <template #icon><SearchOutlined /></template>
                    搜索
                </a-button>
                <a-button @click="handleReset">
                    <template #icon><ReloadOutlined /></template>
                    重置
                </a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue";
export default defineComponent({
    name: "AddressMatch",
    props: {
        formState: {
            type: Object,
        },
    },
    setup(props, { emit }) {
        const { formState }: any = toRefs(props);
        const state = reactive({
            handleFinish: () => {
                emit("searchData", {
                    formState: formState.value,
                });
            },
            handleReset: () => {
                formState.value.sjmc = "";
                emit("searchData", {
                    formState: formState.value,
                });
            },
        });
        return {
            ...toRefs(state),
            ...toRefs(props),
        };
    },
    components: {
        SearchOutlined,
        ReloadOutlined,
    },
});
</script>